<nav class="topbar bg-gradient" [ngClass]="{'--active': layoutService.mobileSearchState | async}">
  <div class="topbar__main">
    <div class="topbar__menu" (click)="toggleMenu()"
         [ngClass]="{'checked': layoutService.mobileMenuState | async}">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="topbar__icon">
      <a routerLink="/">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2093.51 386.41" class="logo">
          <path class="cls-1" d="M1029.24,137.23a98.72,98.72,0,0,1,39.7,38.3q14.22,24.66,14.23,56.74,0,32.47-14.23,57.34a98.36,98.36,0,0,1-39.7,38.5q-25.47,13.63-58.75,13.63-33.68,0-59.35-13.63a97.94,97.94,0,0,1-39.9-38.5Q857,264.76,857,232.27q0-32.09,14.23-56.74a98.3,98.3,0,0,1,39.9-38.3q25.67-13.62,59.35-13.63Q1003.77,123.6,1029.24,137.23ZM926.38,186.15q-16.85,18-16.84,46.92T926.38,280q16.85,18,44.11,18,26.47,0,43.31-18t16.84-46.92q0-28.87-16.84-46.92t-43.31-18Q943.22,168.11,926.38,186.15Z" transform="translate(-8.44 -8.78)"></path><path class="cls-1" d="M1298,117.13a93.67,93.67,0,0,0-87.27,2.75,88.81,88.81,0,0,0-33.49,33.69,96.89,96.89,0,0,0,0,94.17,90.09,90.09,0,0,0,33.49,33.88A91.42,91.42,0,0,0,1257.59,294a98.44,98.44,0,0,0,39.59-8.67,113.56,113.56,0,0,0,35.27-24L1363.57,296a162.77,162.77,0,0,1-50.43,34.87,142.1,142.1,0,0,1-58.31,12.81q-39.8,0-72.89-18.92a138.6,138.6,0,0,1-52-51.41Q1111,240.85,1111,201.44t19.31-71.71a138.7,138.7,0,0,1,52.59-50.82q33.3-18.52,73.88-18.52a149.3,149.3,0,0,1,57.92,11.82,142.32,142.32,0,0,1,48.46,32.7l-30.73,38.61A103.93,103.93,0,0,0,1298,117.13Z" transform="translate(-8.44 -8.78)"></path><path class="cls-1" d="M1567.27,148.84q20.88,21.87,20.88,59.3v131.6h-51.61V223.11q0-22.06-12.61-34.87t-34.28-12.8q-25.61.39-40.58,17.33t-15,43.34V339.74h-51.22V47.39h51.22V169.13q21.66-41.37,76-42.15Q1546.38,127,1567.27,148.84Z" transform="translate(-8.44 -8.78)"></path><path class="cls-1" d="M1746.54,339.74V314.13A69.13,69.13,0,0,1,1718.17,335q-17.34,7.1-39.79,7.09-22.07,0-38.81-8.47a62.12,62.12,0,0,1-25.81-23.44,63.43,63.43,0,0,1-9.06-33.49q0-29.55,20.88-46.3t59.1-17.14h61.47v-5.51q0-18.52-12.22-28.77t-35.46-10.24q-29.94,0-62.64,19.7L1617.31,153q24.82-13.78,45.11-19.9t47.48-6.1q41,0,63.63,19.7t23,55.16l.39,137.9Zm-18.12-47.48q15.75-10.44,17.73-25.81V247.54H1693q-20.51,0-30.14,6.11t-9.66,19.89q0,13.41,10,21.28t27.38,7.88Q1712.66,302.7,1728.42,292.26Z" transform="translate(-8.44 -8.78)"></path><path class="cls-1" d="M1819.43,129h51.22V339.74h-51.22Zm0-72h51.22V108h-51.22Z" transform="translate(-8.44 -8.78)"></path><path class="cls-1" d="M2079.07,148.84q20.88,21.87,20.88,59.3v131.6h-51.61V223.11q0-22.06-12.61-34.87t-34.28-12.8q-25.62.39-40.38,17.33t-14.78,43.34V339.74h-51.22V129h51.22v39.4Q1968,127.76,2021.94,127,2058.18,127,2079.07,148.84Z" transform="translate(-8.44 -8.78)"></path><polygon class="cls-2" points="407.03 286.95 347.52 385.91 407.03 385.91 466.52 286.95 407.03 187.99 347.52 187.99 407.03 286.95 407.03 286.95"></polygon><polygon class="cls-2" points="260.54 187.99 320.03 286.95 260.54 385.91 320.03 385.91 379.54 286.95 320.03 187.99 260.54 187.99 260.54 187.99"></polygon><polygon class="cls-2" points="553.51 286.95 494.02 187.99 434.52 187.99 494.02 286.95 434.52 385.91 494.02 385.91 553.51 286.95 553.51 286.95"></polygon><path class="cls-2" d="M249.57,383l52.49-87.29-52.49-87.3L229,174.14H392.39C378.88,80.92,298.71,9.28,201.71,9.28,95.25,9.28,8.94,95.56,8.94,202s86.31,192.7,192.77,192.7a192.12,192.12,0,0,0,43.93-5.12l3.93-6.54ZM210.49,236.19A19.14,19.14,0,0,1,184.55,228l-43.41-92.43a11.33,11.33,0,0,1,19.66-11.22l58,85.51a19.62,19.62,0,0,1-8.31,26.33Z" transform="translate(-8.44 -8.78)"></path><path class="cls-3" d="M736.06,204.81l98.71-.08V306q-20.88,16.54-48.85,26.4a166.45,166.45,0,0,1-55.56,9.85q-39.79,0-72.89-18.72a139.49,139.49,0,0,1-71.31-122.33q0-38.61,19.3-70.73a138.82,138.82,0,0,1,52.8-50.63q33.48-18.51,74.07-18.51a159.06,159.06,0,0,1,56.15,10.24,150.74,150.74,0,0,1,47.47,28l-21.67,27.58a120.12,120.12,0,0,0-38-23.83,118.71,118.71,0,0,0-43.93-8.47A107.64,107.64,0,0,0,678,109a105.33,105.33,0,0,0-39.2,38.61A106.79,106.79,0,0,0,639,255a107.87,107.87,0,0,0,39.4,39,106.55,106.55,0,0,0,54.38,14.38A115.73,115.73,0,0,0,768,302.64a131.18,131.18,0,0,0,33.29-16l.11-50.1-46.83-.17Z" transform="translate(-8.44 -8.78)"></path>
        </svg>
      </a>
    </div>
    <div class="topbar__search-btn">
      <i class="fas fa-search fa-fw" [ngClass]="{'fa-times': layoutService.mobileSearchState | async}" (click)="toggleSearch()"></i>
    </div>
  </div>
</nav>
<div class="topbar__search" [ngClass]="{'--active': layoutService.mobileSearchState | async}">
  <div>
    <app-search></app-search>
  </div>
</div>
